/* Estilo para el scroll */
::-webkit-scrollbar {
   width: 2px; /* Ancho del scroll */
}

/* Track */
::-webkit-scrollbar-track {
   background: #ffffff; /* Color del fondo del scroll */
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: #000000; /* Color del scroll */
   border-radius: 10px; /* Bordes redondeados */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #888; /* Cambia el color del scroll al pasar el cursor */
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
   scroll-behavior: smooth;
}

body {
   font-family: "Poppins", sans-serif;
}

/* Encabezado */
.header {
   min-height: 55vh; /* Ajustar la altura mínima del encabezado */
   background: url('images/tiendaGrande2.jpg') no-repeat;
   background-position: 73%; /* Ajustar la posición de la imagen */
   background-size: cover; /* Asegurar que la imagen cubra todo el contenedor */
   position: relative; /* Añadir posición relativa */
}

.header-content {
   position: relative; /* Posicionar relativamente el contenido del encabezado */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%; /* Asegurar que el contenido ocupe toda la altura */
   padding: 50px 0; /* Añadir relleno al contenido del encabezado */
   text-align: center; /* Centrar el texto */
}

/* Menú */

.menu-container {
   width: 100%;
   text-align: center;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #000000;
   z-index: 20; /* Asegura que esté sobre otros elementos */
}

.menu-edit {
   max-width: 900px;
   margin: 0 auto; /* Centra el menú horizontalmente */
   font-size: 20px;
}

.menu-horizontal {
   width: 100%;
   list-style: none;
   display: flex;
   justify-content: space-around;
   padding: 0;
   margin: 0;
}

.menu-horizontal > li > a {
   display: block;
   font-size: 2vh;
   padding: 15px 20px;
   color: white;
   text-decoration: none;
   transition: color 0.3s ease; /* Añadimos una transición para que el cambio de color sea suave */
}

.menu-horizontal > li:hover {
   background-color: rgb(255, 255, 255);
}

.menu-horizontal > li:hover > a {
   color: black; /* Cambiamos el color del texto a negro cuando pasas el ratón sobre el enlace */
}

.menu-vertical {
   position: absolute;
   display: none;
   list-style: none;
   width: 200px;
   background-color: rgba(0, 0, 0, .5);
   font-size: 2vh;
}

.menu-horizontal li:hover .menu-vertical {
   display: block;
}

.menu-vertical li:hover {
   background-color: black;
}

.menu-vertical li a {
   display: block;
   color: white;
   padding: 15px 15px 15px 20px;
   text-decoration: none;
}

/* Menú secundario */
.menu2-container {
   text-align: center;
   color: #000000;
   margin-top: 5rem;
   margin-bottom: 0rem;
}

.menu2-edit {
   display: flex;
   justify-content: center;
}

.menu2-horizontal {
   list-style-type: none;
   padding: 0;
}

.menu2-horizontal li {
   display: inline;
   margin-right: 60px; /* Ajusta el espaciado entre elementos según necesites */
}

.menu2-horizontal li:last-child {
   margin-right: 0; /* Elimina el margen derecho del último elemento */
}

.menu2-horizontal a {
   color: rgb(68, 68, 68); /* Color de texto en negro */
   text-decoration: none; /* Elimina el subrayado de los enlaces */
}

.menu2-horizontal a:hover {
   color: rgb(0, 0, 0); /* Cambia el color del texto al pasar el ratón por encima */
   font-weight: bold;
}

/* Productos */
.products {
   padding: 30px 20px;
   text-align: center;
   opacity: 100%;
   margin-top: 2rem; /* Ajustar para evitar superposición con el menú */
   margin-bottom: 3rem;;
}

.products h2 {
   color: #111111;
   font-family: 'Oswald', sans-serif;
   font-size: 40px;
   text-transform: uppercase;
   margin-bottom: 30px;
}

.product-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(479px, 1fr));
   gap: 15px;
   opacity: 100%;
}

.product {
   text-align: center;
   padding: 20px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s, box-shadow 0.3s;
   opacity: 100%;
}

.product img {
   width: 100%;
   max-width: 200px;
   height: auto;
   margin-bottom: 0.3rem;
   border: 2px solid #ddd;
}

.product h3 {
   font-size: 18px;
   color: #111111;
   font-family: 'Oswald', sans-serif;
   text-transform: uppercase;
   margin-bottom: 10px;
}

.product p,
.precio {
   font-size: 14px;
   color: #111111;
   margin-bottom: 10px;
}

.precio {
   font-weight: 800;
}

/* Clase expandida para el producto */
.product.expanded {
   transform: scale(1.4); /* Aumentar el tamaño */
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* Aumentar la sombra */
   z-index: 10; /* Asegurar que el producto esté en la parte superior */
   background-color: white;
}

/* Estilos para el botón */
.button {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 2em; /* Tamaño reducido */
   height: 2em; /* Tamaño reducido */
   border: none;
   background: rgba(180, 83, 107, 0.11);
   border-radius: 5px;
   transition: background 0.5s;
   display: none; /* Inicialmente oculto */
}

.X,
.Y {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1em; /* Tamaño reducido */
   height: 1px; /* Tamaño reducido */
   background-color: #fff;
}

.X {
   transform: translateX(-50%) rotate(45deg);
}

.Y {
   transform: translateX(-50%) rotate(-45deg);
}

.close {
   position: absolute;
   display: flex;
   padding: 0.4rem 0.75rem; /* Tamaño reducido */
   align-items: center;
   justify-content: center;
   transform: translateX(-50%);
   top: -70%;
   left: 50%;
   width: 1.5em; /* Tamaño reducido */
   height: 0.85em; /* Tamaño reducido */
   font-size: 8px; /* Tamaño reducido */
   background-color: rgb(19, 22, 24);
   color: rgb(187, 229, 236);
   border: none;
   border-radius: 3px;
   pointer-events: none;
   opacity: 0;
}

.button:hover {
   background-color: rgb(211, 21, 21);
}

.button:active {
   background-color: rgb(130, 0, 0);
}

.button:hover>.close {
   animation: close 0.2s forwards 0.25s;
}

@keyframes close {
   100% {
      opacity: 1;
   }
}

/* Clase expandida para el producto */
.product.expanded .button {
   display: block; /* Mostrar el botón cuando el producto está expandido */
}

/* Footer */
.footer {
   background-color: #111111;
   color: white;
   padding: 10px;
   text-align: center;
   font-size: 1.5em; /* Tamaño de texto medio-grande */
   box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.1); /* Sombra para darle un poco de estilo */
}

.footer-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 20 20px; /* Agregar padding a los lados */
   position: relative; /* Agregado para posicionar el código QR */
   margin: 0 10px;
}

.link {
   flex: 1; /* Establecer flex para ajustar la separación */
   transition: transform 0.5s ease; /* Transición suave */
}

.link img:hover {
   transform: scale(1.05); /* Aumenta la imagen ligeramente al pasar el mouse */
}

.title {
   margin-left: 8rem; /* Margen izquierdo */
   margin-right: 8rem; /* Margen derecho */
}

.title h1 {
   font-size: 18px; /* Tamaño de fuente */
   color: #ffffff; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 10px; /* Margen inferior */
}

.title p {
   font-size: 18px; /* Tamaño de fuente */
   color: #dcdcdc; /* Color del texto */
   margin-bottom: 10px; /* Margen inferior */
   text-decoration: none; /* Sin subrayado */
}

.footer .qr-code {
   position: absolute;
   top: 50%;
   right: 20px; /* Ajusta esta posición según sea necesario */
   transform: translateY(-50%);
   width: 100px; /* Tamaño del código QR */
   height: 100px; /* Tamaño del código QR */
}

.footer-content h3 {
   font-size: 1.2em; /* Tamaño de texto medio */
   margin-bottom: 5px;
}

.footer-content p {
   font-size: 1em; /* Tamaño de texto regular */
   margin: 5px 0;
}

.footer-content a {
   color: #bbbbbb; /* Color de enlace */
   text-decoration: none; /* Sin subrayado */
}

.footer-content a:hover {
   text-decoration: underline; /* Subrayado al pasar el cursor */
}

.footer .qr-code {
   width: 120px; /* Tamaño del código QR */
   height: 120px;
}

@media (max-width: 768px) {
   .menu-container {
      min-height: 5vh; /* Ajustar la altura mínima */
      background-position: 73%; /* Ajustar la posición de la imagen */
      background-size: cover; /* Asegurar que la imagen cubra todo el contenedor */
      position: relative; /* Añadir posición relativa */
   }
   
   .menu-content {
      position: relative; /* Posicionar absolutamente el contenido */
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translate(-50%, -50%); /* Centrar perfectamente */
      justify-content: center;
      height: 100%; /* Asegurar que el contenido ocupe toda la altura */
      padding: 50px 0; /* Añadir relleno al contenido */
      text-align: center; /* Centrar el texto */
   }

   .menu-horizontal > li > a {
      font-size: 16px; /* Reducimos el tamaño de fuente */
   }

   .menu-horizontal {
      flex-direction: row; /* Cambiamos la dirección del flexbox de column a row */
      justify-content: space-around; /* Alineamos los elementos horizontalmente */
   }

   .menu-horizontal > li {
      width: auto; /* Revertimos la anchura al valor por defecto */
      text-align: center;
   }

   .menu-horizontal > li > a {
      padding: 15px 10px; /* Ajustamos el espaciado */
   }

   .menu2-horizontal li {
      margin-right: 0; /* Eliminamos el margen derecho */
   }

   .product-content {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }

   .footer-content {
      padding: 20px 10px;
   }
}

@media (max-width: 480px) {
   .menu2-horizontal li {
      margin-right: 20px;
   }

   .footer-content {
      padding: 20px 10px;
   }
}